import React, {createRef, useEffect, useRef, useState} from 'react';
import RcResizeObserver from 'rc-resize-observer';
import {PageContainer} from '@ant-design/pro-layout';
import {DualAxes} from '@ant-design/charts';
import ProCard, {StatisticCard} from '@ant-design/pro-card';
import {Button, DatePicker, Form, Select, Space, Tooltip} from 'antd';
import {QuestionCircleOutlined, SearchOutlined} from '@ant-design/icons';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {
	getGoodsStatistics,
	getGoodsStatisticsChart,
	getGoodsStatisticsHeader,
	getGoodsStatisticsIncrease
} from "@/services/ant-design-pro/statistics";
import "./index.css"

const Commodity: React.FC = () => {
	const [responsive, setResponsive] = useState(false);
	const [goodsHeaderData, setGoodHeaderData] = useState([])
	const [goodsChainGrowthData, setGoodsChainGrowthData] = useState([])
	const [goodsChartData, setGoodsChartData] = useState([])
	const [tableSearch, setTableSearch] = useState({})
	const [cardSearch, setCardSearch] = useState({})
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	useEffect(async () => {
		const data = await getGoodsStatisticsHeader({...cardSearch})
		setGoodHeaderData(data)
		const data1 = await getGoodsStatisticsIncrease()
		setGoodsChainGrowthData(data1)
		const data2 = await getGoodsStatisticsChart()
		setGoodsChartData(data2)
	}, [])
	const imgStyle = {
		display: 'block',
		width: 36,
		height: 36,
	};
	const {Statistic} = StatisticCard;
	const {RangePicker} = DatePicker;
	const {Option} = Select;
	const config = {
		data: [goodsChartData[1],goodsChartData[0]],
		xField: 'time',
		yField: ['count', 'value'],
		geometryOptions: [
			{
				geometry: 'column',
				isGroup: true,
				seriesField: 'type',
				columnWidthRatio: 0.4,
			},
			{
				geometry: 'line',
				seriesField: 'name',
				lineStyle: function lineStyle(_ref) {
					const name = _ref.name;
					if (name === '商品浏览量') {
						return {
							lineDash: [1],
							opacity: 1,
						};
					}
					return {opacity: 0.7};
				},
				cursor: 'pointer'
			},
		],
	};
	// 表格
	const columns = [
		{
			title: '商品图片',
			dataIndex: 'index',
			align: 'center',
			search: false,
			render: ((_, render) => {
			})
		},
		{
			title: '商品名称',
			dataIndex: 'name',
			align: 'center',
			search: false
		},
		{
			title: '浏览量',
			dataIndex: 'visit_num',
			align: 'center',
			search: false
		},
		{
			title: '访客数',
			dataIndex: 'creator',
			align: 'center',
			search: false
		},
		{
			title: '加购件数',
			dataIndex: 'cart_num',
			align: 'center',
			search: false
		},
		{
			title: '下单件数',
			dataIndex: 'order_num',
			align: 'center',
			search: false
		},
		{
			title: '支付件数',
			dataIndex: 'pay_num',
			align: 'center',
			search: false
		},
		{
			title: '支付金额',
			dataIndex: 'pay_price',
			align: 'center',
			search: false
		},
		{
			title: '毛利率',
			dataIndex: 'margin',
			align: 'center',
			search: false
		},
		{
			title: '收藏数',
			dataIndex: 'collect_num',
			align: 'center',
			search: false
		},
		{
			title: (
				<>
					创建时间
					<Tooltip placement="top" title="这是一段描述">
						<QuestionCircleOutlined style={{marginLeft: 4}}/>
					</Tooltip>
				</>
			),
			width: 140,
			key: 'since',
			dataIndex: 'created_at',
			search: false,
			valueType: 'date',
			sorter: (a, b) => a.createdAt - b.createdAt,
		},
		{
			title: '访客-支付转化率(%)',
			dataIndex: 'payment',
			ellipsis: true,
			search: false
		},
		{
			title: '操作',
			key: 'option',
			width: 100,
			align: 'center',
			fixed: "right",
			render: (_ => {
				return <a>查看</a>
			})
		},
	];

	return (
		<PageContainer header={{breadcrumb: {}}}>
			<ProCard
				title="商品概况"
				extra={(
					 <Form className="search" >
						 <Space direction="vertical" size={8} style={{marginRight: '20px'}}>
							 <RangePicker
								 onChange={(_,dateString) => {
									 setCardSearch({...{start:dateString[0],end:dateString[1]}})
								 }}
							 />
						 </Space>
						 <Button type="primary"
						 onClick={ async () => {
							let data = await getGoodsStatisticsHeader({...cardSearch})
							 setGoodHeaderData(data)
						 }}
						 >查询</Button>
						 <Button type="primary">导出</Button>
					 </Form>
				)}
				 tooltip='提示'
			>
				<RcResizeObserver
					key="resize-observer"
					onResize={(offset) => {
						setResponsive(offset.width < 400);
					}}
				>
					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name1}</h3>),
								style: {fontSize: '20px'},
								value: `${goodsHeaderData.visit_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/splll.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={goodsChainGrowthData.visit_num } trend="down"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name2}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.visitor_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/spfks.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={goodsChainGrowthData.visitor_num } trend="up"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name3}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.cart_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/jgjs.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={goodsChainGrowthData.cart_num } trend="down"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name4}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.order_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/xdjs.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={goodsChainGrowthData.order_num }  trend="up"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name5}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.pay_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/zfjs.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={ goodsChainGrowthData.pay_num } trend="up"/>,
							}}
						/>
					</StatisticCard.Group>
					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name6}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.pay_price}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/zfje.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>}  value={ goodsChainGrowthData.pay_price } trend={goodsChainGrowthData.pay_price ? "up" : "down"}/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name7}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.cost_price}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/cbje.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={ goodsChainGrowthData.cost_price } trend={ goodsChainGrowthData.cost_price  ? "up" : "down"}/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name8}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.refund_price}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/tkje.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={ goodsChainGrowthData.refund_price } trend="up"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name9}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.refund_num}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/tkjs.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={ goodsChainGrowthData.refund_num } trend="down"/>,
							}}
						/>
						<StatisticCard
							statistic={{
								valueStyle: {fontSize: '30px', fontWeight: 500, marginTop: '-10px'},
								title: (<h3>{goodsHeaderData.name10}</h3>),
								style: {fontSize: '20px'},
								value:`${goodsHeaderData.Payment}`,
								icon: (
									<img
										style={imgStyle}
										src={require("/public/goodsIcon/fklzfzhl.png")}
										alt="icon"
									/>
								),
								description: <Statistic title={<h4>环比增长</h4>} value={ goodsChainGrowthData.Payment } trend={goodsChainGrowthData.Payment ? "up" : "down"}/>,
							}}
						/>
					</StatisticCard.Group>
				</RcResizeObserver>

				{ goodsChartData[0] ?
					<DualAxes {...config} />
					: null
				}
			</ProCard>
			<div style={{background: 'white', marginTop: '15px'}}>
				<ProTable
					actionRef={actionRef}
					columns={columns}
					scroll={{x: 1400}}
					request={async (params = {}, sort, filter) => {
						// 表单搜索项会从 params 传入，传递给后端接口。
						return {
							data,
							success: true,
						};
					}}
					rowKey="key"
					pagination={{
						showQuickJumper: true,
					}}
					search={false}
					dateFormatter="string"
					toolbar={{
						title: '高级表格',
						tooltip: '这是一个标题提示',
					}}
					toolBarRender={() => [
						<Form >
							<Select defaultValue="全部" style={{width: 200, marginRight: '20px'}}
								onSelect={(status) => {
									setTableSearch({...{status}})
								}}
							>
								<Option value="visit_num">浏览量</Option>
								<Option value="lucy">访客数</Option>
								<Option value="1">加购件数</Option>
								<Option value="2">下单件数</Option>
								<Option value="3">支付金额</Option>
								<Option value="4">毛利率</Option>
								<Option value="5">收藏数</Option>
								<Option value="6">访客-支付转换化率</Option>
							</Select>
							<Space direction="vertical" size={8} style={{marginRight: '20px'}}>
								<RangePicker
									onChange={(_,dateString) => {
										setTableSearch({...tableSearch,...{start:dateString[0],end:dateString[1]}})
									}}
								/>
							</Space>

							<Button  type="primary" icon={<SearchOutlined/>}
								onClick={() => {
									actionRef.current?.reload()
								}}
							>
								查询
							</Button>
						</Form>
					]}
				/>
			</div>
		</PageContainer>
	)
}

export default Commodity;

